<template>
	<view class="flexGap">
		<picker mode="date"  v-if="!isDouble" :value="dateform.startTime" :start="startDate" :end="endDate"
			@change="bindSingleDateChange" style="width: 100%;">
			<button type="primary"  >{{label}}{{dateform.startTime===''?'请选择':dateform.startTime}} <text class="iconfont"  :class="[{'icon-xiangshang2':dateform.overTime,'icon-caret-bottom':!dateform.overTime}]"></text></button>		
		</picker>
		<picker mode="date" fields="month" v-if="isDouble" :value="dateform.startTime" :start="startDate" :end="dateform.overTime"
			@change="bindStartDateChange" style="width: 100%;">
			<button type="primary"  >{{label}}起始： {{dateform.startTime===''?'请选择':dateform.startTime}} <text class="iconfont"  :class="[{'icon-xiangshang2':dateform.overTime,'icon-caret-bottom':!dateform.overTime}]"></text></button>			
		</picker>
		<picker mode="date" fields="month" v-if="isDouble" :value="dateform.overTime" :start="dateform.startTime" :end="endDate"
			@change="bindEndDateChange" style="width: 100%;">
			<button type="warn" >{{label}}截止： {{dateform.overTime===''?'请选择':dateform.overTime}} <text class="iconfont"  :class="[{'icon-xiangshang2':dateform.overTime,'icon-caret-bottom':!dateform.overTime}]"></text></button>
			
		</picker>
	</view>
</template>

<script>
	export default {
		model: {
			prop: 'value',
			event: 'update:value'
		},
		props: {
			value: String,
			label: {
				type: String,
				default: '',
			},
			isDouble: {
				type: Boolean,
				default: true, // 默认为双时间选择器
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				dateform: {
					overTime: '',
					startTime: ''
				}
			}
		},
		watch: {
			value: {
				handler(newVal) {
					if (newVal) {
						if (newVal.includes('至')) {
							const dates = newVal.split('至');
							this.dateform.startTime = dates[0];
							this.dateform.overTime = dates[1];
						} else {
							this.dateform.startTime = newVal;
						}

					} else {
						this.dateform.startTime = '';
						this.dateform.overTime = '';
					}
				},
				immediate: true
			},

		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			// 获取时间
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 100;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 选择单个时间
			bindSingleDateChange(e) {
				this.dateform.startTime = e.detail.value;
				this.$emit('update:value', this.dateform.startTime);
				this.$emit('change', this.dateform.startTime);
			},
			// 选择起始时间（双时间选择器）
			bindStartDateChange(e) {
				this.dateform.startTime = e.detail.value;
				this.$emit('update:value', this.dateform.startTime + '至' + this.dateform.overTime);
				this.$emit('changeStart', this.dateform.startTime + '至' + this.dateform.overTime);
			},
			// 选择截止时间（双时间选择器）
			bindEndDateChange(e) {
				this.dateform.overTime = e.detail.value;
				this.$emit('update:value', this.dateform.startTime + '至' + this.dateform.overTime);
				this.$emit('changeEnd', this.dateform.startTime + '至' + this.dateform.overTime);
			},
			// 按照时间查找
			findDate() {
				if (this.isDouble && (this.dateform.startTime === '' || this.dateform.overTime === '')) {
					uni.showModal({
						title: '提示',
						content: `请选择起始时间和结束时间后，再点击查询`,
						showCancel: false
					});
				} else if (!this.isDouble && this.dateform.startTime === '') {
					uni.showModal({
						title: '提示',
						content: `请选择时间后，再点击查询`,
						showCancel: false
					});
				} else {
					getTask(this.dateform).then(res => {
						this.tasklistArr = JSON.parse(JSON.stringify(res.data.data));
					})
				}
			},
			// 清除时间
			cleardateForm() {
				this.dateform.startTime = "";
				this.dateform.overTime = "";
				getTask(this.dateform).then(res => {
					this.tasklistArr = JSON.parse(JSON.stringify(res.data.data));
				})
			},
		}
	};
</script>

<style scoped>
.iconfont{
	position: absolute;
	right: 10px;
}
</style>